<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <!--1.引入 bootstrap 框架全局样式 -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"/>
    <!--2.引入 angularJS 分页的样式 -->
    <link rel="stylesheet" href="../angularjs/pagination.css">
    <!--3.引入 jquery 框架类库 -->
    <script src="../bootstrap/js/jquery.min.js"></script>
    <!--4.引入 bootstrap 框架类库 -->
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <!--5.引入 angularJS 框架类库 -->
    <script src="../angularjs/angular.min.js"></script>
    <!--6.引入 angularJS 框架分页的类库 -->
    <script src="../angularjs/pagination.js"></script>
    <!--7.引入layer css-->
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <!--8.引入layer js-->
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script>
        var app = angular.module("userListApp", ['ngCookies', 'pagination']).config(function ($httpProvider) {
            $httpProvider.defaults.useXDomain = true;
            delete $httpProvider.defaults.headers
                .common['X-Requested-With']
        });
        app.controller("userListController", function ($scope, $http, $window, $cookieStore, $element) {
            var token ;
            $scope.user = {};
            $scope.roleUsers = {};
            var id;
            //定义分页参数
            $scope.paginationConf = {
                //引入分页属性
                currentPage: 1,//当前页
                itemsPerPage: 4,//每页多少个
                totalItems: 100,//一共多少数据
                perPageOptions: [2, 5, 10, 20, 50, 100],//代表分页的选项
                onChange: function () {
                    $scope.getUserList($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage)
                }
            };
            $scope.getdata = function () {
                token=$window.localStorage.getItem("tokens");
                $scope.getUserList($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage)
            };
            //获得用户信息
            console.log(localStorage.getItem("tokens"))
            $scope.getUserList = function (index, size) {
                console.log(token)
                $http.post("http://localhost:10088/admin/getUserAll?index=" + index + "&size=" + size, "",{
                    headers: {'auth': token}
                }).success(function (data) {
                    if (data.code === 200) {
                        $scope.lists = data.data.list;
                        $scope.paginationConf.totalItems = data.data.total;
                    } else {
                        layer.msg(data.msg);
                    }
                });
            };
            //修改状态
            $scope.updateStatus = function (uid) {
                $scope.user.uid = uid;
                $http.post("http://localhost:10088/admin/updateUserIs", $scope.user, {
                    headers: {'auth': token}
                }).success(function (data) {
                    if (data.code === 200) {
                        layer.msg("修改成功");
                        $scope.getdata();
                    } else {
                        layer.msg(data.msg);
                    }
                });
            };
            //查看权限
            $scope.roleView = function (uid) {
                id = uid;
                $('#myModal').modal('show');
                $http.post("http://localhost:10088/admin/getUserRoleAll?uid=" + uid, "",{
                    headers: {'auth': token}
                }).success(function (data) {
                    if (data.code === 200) {
                        layer.msg("查询成功");
                        $scope.role = data.data;
                    } else {
                        layer.msg(data.msg);
                    }
                });
            };
            //修改角色
            $scope.updateRole = function () {
                //上面的全局id就是uid
                $scope.roleUsers.uid = id;
                $http.post("http://localhost:10088/admin/updateUserRoles", $scope.roleUsers, {
                    headers: {'auth': token}
                }).success(function (data) {
                    if (data.code === 200) {
                        $http.post("http://localhost:10088/admin/getUserRoleAll?uid=" + id, "",{
                            headers: {'auth': token}
                        }).success(function (data) {
                            if (data.code === 200) {
                                layer.msg("修改成功");
                                $scope.role = data.data;
                            } else {
                                layer.msg(data.msg);
                            }
                        });
                    } else {
                        layer.msg(data.msg);
                    }
                });
            };
            //打开添加员工模态框
            $scope.openAddModel = function () {
                $('#myModal2').modal('show');
            };
            //添加员工
            $scope.addUser = function () {
                $http.post("http://localhost:10088/admin/addUser", $scope.users, {
                    headers: {'auth': token}
                }).success(function (data) {
                    if (data.code === 200) {
                        layer.msg("添加成功");
                        $('#myModal2').modal('hide');
                        $scope.getdata();
                    } else {
                        layer.msg(data.msg);
                    }
                });
            };
            //退出登录
            $scope.logout = function () {
                $window.localStorage.setItem("tokens", "");
                $window.location.href = "login.html";
            }
        });

    </script>
</head>
<body ng-app="userListApp" ng-controller="userListController" ng-init="getdata()">
<div class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">超级管理员后台</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="javascript:void(0)" >用户管理</a></li>

        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span>角色: admin</a></li>
            <li><a href="javascript:void(0)" ng-click="logout()"><span class="glyphicon glyphicon-log-in"></span>注销</a>
            </li>
        </ul>

    </div>

</div>
<div class="container-fluid">
    <div class="panel panel-primary">
        <!--<div class="panel-heading" style="text-align: center">-->
            <!--<h2>用户列表</h2>-->
        <!--</div>-->
        <div class="panel-body">
            <div class="form-inline">
                <div class="form-group">
                    <button class="btn btn-success" ng-click="openAddModel()">添加员工</button>
                </div>
            </div>
            <table class="table table-bordered table-striped table-hover text-center">
                <tr>
                    <td>序号</td>
                    <td>用户id</td>
                    <td>用户姓名</td>
                    <td>手机号码</td>
                    <td>邮箱</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
                <tr ng-repeat="c in lists">
                    <td>{{$index + 1}}</td>
                    <td>{{c.uid}}</td>
                    <td>{{c.nickname}}</td>
                    <td>{{c.phone}}</td>
                    <td>{{c.email}}</td>
                    <td>
                        <div ng-switch="c.is_deleted">
                            <button class="btn btn-danger" ng-switch-when="1" ng-click="updateStatus(c.uid)">禁用</button>
                            <button class="btn btn-primary" ng-switch-when="0" ng-click="updateStatus(c.uid)">正常
                            </button>
                        </div>
                    </td>
                    <td>
                        <button class="btn btn-success" ng-click="roleView(c.uid)">查看权限</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="7">
                        <!--分页标签一行代码：-->
                        <tm-pagination conf="paginationConf"></tm-pagination>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!-- 添加员工模态框 -->
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel2">添加员工模态框</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <input ng-model="users.nickname" type="text" class="form-control" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <input ng-model="users.password" type="password" class="form-control" placeholder="请输入密码">
                    </div>
                    <div class="form-group">
                        <input ng-model="users.phone" type="text" class="form-control" placeholder="请输入手机号">
                    </div>
                    <div class="form-group">
                        <input ng-model="users.email" type="text" class="form-control" placeholder="请输入邮箱">
                    </div>
                    <div class="form-group">
                        <select class="form-control" ng-model="users.rid">
                            <option value="2">manager</option>
                            <option value="3">inspector</option>
                            <option value="4">distribution</option>
                            <option value="5">admin</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <button class="btn btn-primary" ng-click="addUser()">确认</button>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 权限模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">个人权限</h4>
                </div>
                <div class="modal-body">
                    <div class="form-inline">
                        <label>更换角色(每个人只能有一个角色)</label>
                        <div class="form-group">
                            <select class="form-control" ng-model="roleUsers.rid">
                                <option value="1">user</option>
                                <option value="2">manager</option>
                                <option value="3">inspector</option>
                                <option value="4">distribution</option>
                                <option value="5">admin</option>
                            </select>
                            <button class="btn btn-success" ng-click="updateRole()">操作角色</button>
                        </div>
                    </div>
                    <table class="table table-bordered table-striped table-hover text-center">
                        <tr>
                            <td>序号</td>
                            <td>权限id</td>
                            <td>权限名称</td>
                            <td>权限状态</td>
                        </tr>
                        <tr ng-repeat="c in role">
                            <td>{{$index + 1}}</td>
                            <td>{{c.rid}}</td>
                            <td>{{c.rname}}</td>
                            <td>
                                <div ng-switch="c.state">
                                    <span ng-switch-when="1" ng-click="updateStatus(c.uid)">正常</span>
                                    <span ng-switch-when="0" ng-click="updateStatus(c.uid)">禁用
                                    </span>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>
</body>
</html>